<template>
    <div id="About" class="container-fiuid">
      <div class="row ">
        <div class="col-sm-3">
          <ul class="list-group ">
            <router-link tag="li" class="list-group-item" :to="{name:'contactLink'}">
              <h4 class="list-group-item-heading">联系我们</h4>
              <p class="list-group-item-text">沟通是一种技巧，常联系。</p>
            </router-link>
            <router-link tag="li" class="list-group-item" :to="{name:'deliveryLink'}">
              <h4 class="list-group-item-heading">快递信息</h4>
              <p class="list-group-item-text">诚信为本、客户至上、安全快捷。</p>
            </router-link>
            <router-link tag="li" class="list-group-item" :to="{name:'historyLink'}">
              <h4 class="list-group-item-heading">历史订单</h4>
              <p class="list-group-item-text">账户信息清洗明确。</p>
            </router-link>
            <router-link tag="li" class="list-group-item" :to="{name:'orderingGuideLink'}">
              <h4 class="list-group-item-heading">订餐向导</h4>
              <p class="list-group-item-text">为您快速选出最喜欢的。</p>
            </router-link>
          </ul>
        </div>
        <div class="col-sm-9 d-flex">
          <router-view ></router-view>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      title: "There is About"
    };
  },
    beforeCreate:function(){
    console.log(this.title,"组件创建开始时！");
  },
  created:function(){
    console.log(this.title,"组件创建完成时！");
  },
  beforeMount:function(){
    console.log(this.title,"组件挂载开始时！");
  },
  mounted:function(){
    console.log(this.title,"组件挂载结束时！");
  },
  beforeUpdate:function(){
     console.log(this.title,"组件挂更新开始时！");
  },
  updated:function(){
     console.log(this.title,"组件更新结束时！");
  },
  beforeDestroy:function(){
    console.log(this.title,"组件销毁开始时！");
  },destroyed:function(){
    console.log(this.title,"组件销毁结束时！");
  }
};
</script>

<style scoped>
.active,ul li:hover{
  background-color:#e2e3e5;;
}
#About{
  border:1px solid black;
}


</style>
